/**
* Created by czg on 2019/1/7 0007 Time: 11:28 .
*/

<template lang="html">
    <div class="index-container" id="scro">
        <r-tab></r-tab>
        <Scroll :on-reach-bottom="handleReachBottom" :height="fullHeight" loading-text="hi">
        <Carousel
            v-model="lunbo"
            :autoplay="setting.autoplay"
            :autoplay-speed="setting.autoplaySpeed"
            :dots="setting.dots"
            :radius-dot="setting.radiusDot"
            :trigger="setting.trigger"
            :arrow="setting.arrow">
            <CarouselItem v-for="(item, index) in bannerList" :key="index">
                <div class="CarouselImg" >
                    <img :src="item.img_url"/>
                </div>
            </CarouselItem>
        </Carousel>
        <div class="big-title">
            <p class="chineseTxt">商城指南</p>
            <p class="EngTxt">Business City Guide</p>
        </div>
        <div style="width: 100%;height: 100px;padding: 0 1%;">
            <div class="Guide-btn guide1" @click="toInfo">
                <p class="txt1">商城简介</p>
                <p class="txt2">Brief introduction</p>
                <Icon class="go-ic"/>
                <img src="../assets/guide1.png"/>
            </div>
            <div class="Guide-btn guide2" @click="toArrive">
                <p class="txt1">如何到达</p>
                <p class="txt2">How to arrive</p>
                <Icon class="go-ic"/>
                <img src="../assets/guide2.png"/>
            </div>
        </div>
        <div class="big-title">
            <p class="chineseTxt">商家活动</p>
            <p class="EngTxt">Business activities</p>
        </div>
            <div>
                <act-item :list="activityList" @toDetail="toDetail"></act-item>
            </div>
        </Scroll>
    </div>
</template>
<script>
import ActItem from '../components/actItem'
import RTab from '../components/rTab'
import axios from 'axios'
export default {
  name: 'index',
  components: {RTab, ActItem},
  beforeMount () {
    var h = document.documentElement.clientHeight || document.body.clientHeight
    // 减去页面上固定高度height
    this.fullHeight = h - 50
  },
  created () {
    this.getBanner()
    this.getActList()
  },
  methods: {
    handleReachBottom () {
      console.log(this.fullHeight)
    },
    getBanner () {
      axios.post('https://vip.gznewpark.com/dist/admin/public/index.php/wx/Shop/bannerList').then(res => {
        this.bannerList = res.data.result
      })
    },
    getActList () {
      axios.post('https://vip.gznewpark.com/dist/admin/public/index.php/wx/Shop/index').then(res => {
        this.activityList = res.data.result.activity
        this.isInfoUrl = res.data.result.desc.is_url
        this.isArriveUrl = res.data.result.arrive.is_url
        this.infoUrl = res.data.result.desc.url
        this.arriveUrl = res.data.result.arrive.url
      })
    },
    toInfo () {
      if(this.isInfoUrl ==0){
        this.$router.push({path: '/info'})
      } else {
        window.location.href = this.infoUrl
      }
    },
    toArrive () {
      if(this.isArriveUrl ==0){
        this.$router.push({path: '/arrive'})
      } else {
        window.location.href = this.arriveUrl
      }
    },
    toDetail (id) {
      console.log(id)
      this.$router.push({
        path: '/detail',
        query: {
          id: id
        }
      })
    }
  },
  data () {
    return {
      isInfoUrl: 0,
      isArriveUrl: 0,
      infoUrl: '',
      arriveUrl: '',
      fullHeight: 0,
      loadingText: 'hi',
      activityList: [],
      bannerList: [],
      lunbo: 0,
      setting: {
        autoplay: true,
        autoplaySpeed: 2000,
        dots: 'inside',
        radiusDot: true,
        // trigger: 'click',
        arrow: 'never'
      }
    }
  },
  watch: {
    fullHeight (val) {
      if (!this.timer) {
        this.fullHeight = val
        console.log(this.fullHeight)
        this.timer = true
        let that = this
        setTimeout(function () {
          that.timer = false
        }, 400)
      }
    }
  }
}
</script>

<style>
.index-container{
    width: 100%;
    height: 100%;
    -webkit-overflow-scrolling: touch;
}
.index-container ::-webkit-scrollbar {
    /*background-color: transparent;*/
    display: none;/*隐藏滚轮*/
}
.ivu-scroll-loader{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}
    .CarouselImg{
        width: 100%;
        height: 200px;
    }
    .CarouselImg img{
        width: 100%;
        height: 100%;
    }
.ivu-drawer-content{
    background-color: #363241!important;
}
    .big-title{
        margin: 15px 0;
    }
    .chineseTxt{
        font-size: 20px;
        font-weight: bold;
    }
    .EngTxt{
        font-size: 10px;
        color: #c99446;
    }
    .Guide-btn{
        margin: 0 1%;
        height: 100%;
        width: 48%;
        float: left;
        border-radius: 8px;
        padding: 6% 0 0 4%;
        text-align: left;
        position: relative;
    }
    .Guide-btn p{
        color: #fff;
    }
    .Guide-btn .txt1{
        font-size: 14px;
    }
    .Guide-btn .txt2{
         font-size: 10px;
     }
    .Guide-btn img{
        transform: scale(0.5);
        position: absolute;
    }
    .go-ic{
        background-image: url(../assets/go_ic.png);
        width:17px;
        height: 11px;
        background-position: center center;
        -webkit-background-size: 100% 100%;
        background-size: 100% 100%;
    }
    .guide1{
        background: linear-gradient(to right, #8d58fe, #6e40ff);
        -webkit-box-shadow: 0 0 3px 1px #6e40ff;
        -moz-box-shadow: 0 0 3px 1px #6e40ff;
        box-shadow: 0 0 3px 1px #6e40ff;
     }
    .guide1 img{
        bottom: -15%;
        right: -10%;
    }
    .guide2{
        background: linear-gradient(to right, #d6ad6a, #c99446);
        -webkit-box-shadow: 0 0 3px 1px #c99446;
        -moz-box-shadow: 0 0 3px 1px #c99446;
        box-shadow: 0 0 3px 1px #c99446;
    }
    .guide2 img{
        bottom: -15%;
        right: -13%;
    }
</style>
